<!-- 分公司销售排行 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 42% !important;">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'招商销售收入对比'"/>
        <div class="layChart" ref="fgsxsphRef"></div>
      </div>
      <div class="layer-bottom">
        <div class="pd_abItems-contain">
          <!-- <div class="pd_abItems-main">
            <div v-for="(item,index) in typeItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="typeItemsClick(item)">{{item.title}}</div>
          </div>
          <el-date-picker
              class="custom-date-picker"
              v-model="today"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker> -->
          <div class="pd-abItem-search">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";


const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

function formatDate(date) {
  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
  var year = date.getFullYear();
  var month = padZero(date.getMonth() + 1);
  var day = padZero(date.getDate());
  return `${year}-${month}-${day}`;
}

// 设置本月第一天日期
const now = new Date();
const today = ref([new Date(now.getFullYear(), now.getMonth(), 1),new Date()]);

const search = function (){
  refreshData()
}

const fgsxsphRef = ref();
const fgsxsph_x = ref(['保定分公司','大名分公司','石家庄分公司','沧州分公司','承德分公司',"张家口分公司","秦皇岛分公司","唐山分公司","廊坊分公司","衡水分公司","邢台分公司"])
const fgsxsph_y_1 = ref([140, 232, 101, 264, 90,110, 132, 81, 64, 190,325])
const fgsxsph_y_2 = ref([180, 212, 171, 204, 120,140, 232, 101, 264, 90,125])
const fgsxsphOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  legend: {
    data: ["招商收入","销售金额"],
    right: '3%',
    // top: '12%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '15%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval:0,
      rotate: 25,
      align: 'right',
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
    data: fgsxsph_x.value
  },
  yAxis: {
    type: 'value',
    name: "万元",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      name :"招商收入",
      data: fgsxsph_y_1.value,
      type: 'bar',
      color:'#5AFFFA',
      barWidth: 10,
      itemStyle: {
        borderRadius: [10, 10, 10, 10], // 这里设置圆角
      }
    },
    {
      name :"销售金额",
      data: fgsxsph_y_2.value,
      type: 'bar',
      color:'#F83874',
      barWidth: 10,
      itemStyle: {
        borderRadius: [10, 10, 10, 10], // 这里设置圆角
      }
    }
  ]
});

let fgsxsphChart
onMounted(() => {
  fgsxsphChart = drawLine(fgsxsphRef.value,fgsxsphOpt.value);
  // refreshData();
})

async function refreshData() {

  let startdate,enddate;
  //手动输入
  if(today.value[0].$d){
    startdate = formatDate(today.value[0].$d)
    enddate = formatDate(today.value[1].$d)
  }else{
    startdate = formatDate(today.value[0])
    enddate = formatDate(today.value[1])
  }

  const params = {
    // modetype: modetypecode.value,
    // startdate:startdate,
    // enddate:enddate
  }

  fgsxsph_x.value = []
  fgsxsph_y.value = []
  // fgsxsph_x.value = ['','','','','']
  // fgsxsph_y.value = [0,0.0,0,0]
  // const result = await ajaxRequest('post', 'getFgsxsph', params)
  // if (result.data && result.data.rows.length>0) {
  //   fgsxsph_x.value = []
  //   fgsxsph_y.value = []

  //   result.data.rows.forEach((item,index)=>{
  //     fgsxsph_x.value.push(item.orgname)
  //     fgsxsph_y.value.push(item.taxsaleamnt)
  //   })
  // }


  fgsxsphOpt.value.xAxis.data = fgsxsph_x.value
  fgsxsphOpt.value.series[0].data = fgsxsph_y.value
  fgsxsphChart.setOption(fgsxsphOpt.value)

}

</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:1vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 15vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 24vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>